<!--  -->
<template>
  <div class="details">
    <header>
      <Headerss title="商品详情" @handleSetShow="handleSetShow" :show="show" />
    </header>
    <main>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#484a71">
        <van-swipe-item>
          <img src="../../assets/img/ipone12_02.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/img/大图2_03.gif" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/img/大图03_03.gif" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/img/大图04_03.gif" alt />
        </van-swipe-item>
      </van-swipe>
      <div class="jieshao">
        <ul>
          <li>
            <span>￥{{shopInfo.price}}</span>
            <span>￥{{shopInfo.beforePrice}}</span>
          </li>
          <li>
            <span>{{shopInfo.title}}</span>
          </li>
          <li>
            <span>类型：{{shopInfo.groupNumber}}人团</span>
            <span>累计销量：{{shopInfo.cumulativeSales}}</span>
            <span>限购：{{shopInfo.purchaseLimitation}}</span>
          </li>
          <li>
            <span>拼团玩法</span>
          </li>
          <li>
            <span>1.开团/参团</span>
            <span>→</span>
            <span>2.邀请好友</span>
            <span>→</span>
            <span>3.满员发货</span>
          </li>
        </ul>
      </div>
      <div class="logo-Tab">
        <van-tabs
          title-active-color="#333333"
          color="#484a71"
          title-inactive-color="#333333"
          v-model="activeName"
          @click="onClick"
        >
          <van-tab title="商品" name="goods"></van-tab>
          <van-tab title="评价" name="evaluate"></van-tab>
          <van-tab title="详情" name="info"></van-tab>
        </van-tabs>
      </div>
      <div class="shitu">
        <component v-bind:is="active" />
      </div>
    </main>
    <footer>
      <div @click="toBuy()" class="buy">单独购买</div>
      <div @click="toGroup()" class="group">立即拼团</div>
    </footer>
  </div>
</template>

<script>
import Headerss from "../../components/Headerss";
import evaluate from "./components/evaluate";
import goods from "./components/goods";
import info from "./components/info";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Headerss,
    evaluate,
    goods,
    info,
  },
  data() {
    //这里存放数据
    return {
      active: "info",
      activeName: "info",
      shopInfo: {}, //指定商品信息容器
      show: 0, //侧边栏状态
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //跳转到单独购买
    toBuy() {
      this.$router.push({
        path: "/zhifu",
        query: { allpri: this.shopInfo.price },
      });
    },
    //跳转到立即拼团
    toGroup() {
      this.show = 1;
      this.$router.push({
        path: "/group",
        query: { show: this.show },
      });
    },
    onClick(name) {
      this.active = name;
    },
    //获取指定商品
    async handleSetShopInfo() {
      const shopId = this.$route.query.id;
      const data = await this.$api.groupItem(shopId);
      if (data.code === 0) {
        this.shopInfo = data.data.data[0];
      }
    },
    //修改侧边栏状态
    handleSetShow() {
      this.show = 0;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handleSetShopInfo(); //获取指定商品
  },
};
</script>
<style lang="scss" scoped>
@import "@css/style.scss";
.details {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: scroll;
  overflow: hidden;
}
main {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
  overflow-y: scroll;
  .jieshao {
    width: 100%;
    height: auto;
    background: #f8f8f8;
    ul {
      width: 100%;
      height: 100%;
      li {
        width: 100%;
        height: auto;
        padding: 0 px2rem(20);
      }
      li:nth-child(1) {
        span {
          font-size: px2rem(20);
          color: #ec4e57;
        }
        span:nth-child(2) {
          font-size: px2rem(15);
          margin: 0 px2rem(5);
          text-decoration: line-through;
          color: #9f9ea0;
        }
      }
      li:nth-child(2) {
        width: 100%;
        height: auto;
        display: flex;
        span {
          width: 100%;
          height: auto;
          font-size: px2rem(15);
          margin: px2rem(5) 0;
          font-weight: 600;
          color: #363636;
        }
      }
      li:nth-child(3) {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        border-bottom: solid px2rem(1) #ccc;
        span {
          padding: 0 px2rem(10);
          font-size: px2rem(10);
          margin: px2rem(10) 0;
          color: #7e7e7e;
        }
        span:nth-child(1) {
          padding: 0 0;
        }
      }
      li:nth-child(4) {
        width: 100%;
        height: auto;
        display: flex;
        border-bottom: solid px2rem(1) #ccc;
        span {
          font-size: px2rem(20);
          font-weight: 600;
          margin: px2rem(10) 0;
        }
      }
      li:nth-child(5) {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        span {
          font-size: px2rem(10);
          margin: px2rem(10) 0;
          color: #7e7e7e;
        }
      }
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: px2rem(20);
  line-height: px2rem(330);
  height: px2rem(330);
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
    height: px2rem(330);
  }
}
.logo-tab {
  width: 100%;
  height: px2rem(42);
  font-size: px2rem(18);
}
.shitu {
  width: 100%;
  height: px2rem(1400);
}
footer {
  z-index: 99;
  width: 100%;
  height: px2rem(45);
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: px2rem(45);
  position: sticky;
  left: 0;
  bottom: 0;
  font-size: px2rem(16);
  color: #fff;
  div {
    width: 50%;
    height: 100%;
  }
  .buy {
    background-color: #ebacac;
  }
  .group {
    background-color: #d24646;
  }
}
</style>
